import { reactive, watch } from 'vue';
import { defineStore } from 'pinia';
import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
import { theme as antdTheme } from 'ant-design-vue/es';
import type { ContentWidth, LayoutType, ThemeType } from '@/layouts/basic-layout/typing';
import type { AnimationNameValueType } from '@/config/default-setting';
import defaultSetting from '@/config/default-setting';
import { toggleDark, isDark } from '@/composables/theme';

export interface LayoutSetting {
  title?: string;
  logo?: string;
  theme: ThemeType;
  collapsed: boolean;
  drawerVisible: boolean;
  colorPrimary?: string;
  layout?: LayoutType;
  contentWidth?: ContentWidth;
  fixedHeader?: boolean;
  fixedSider?: boolean;
  splitMenus?: boolean;
  watermark?: boolean;
  header?: boolean;
  footer?: boolean;
  menu?: boolean;
  menuHeader?: boolean;
  multiTab?: boolean;
  multiTabFixed?: boolean;
  headerHeight?: number;
  copyright?: string;
  keepAlive?: boolean;
  accordionMode?: boolean;
  leftCollapsed?: boolean;
  compactAlgorithm?: boolean;
  animationName?: AnimationNameValueType;
}

export const useAppStore = defineStore('app', () => {
  const { darkAlgorithm, compactAlgorithm, defaultAlgorithm } = antdTheme;
  const layoutSetting = reactive<LayoutSetting>(defaultSetting);
  const themeConfig = reactive<ThemeConfig>({
    algorithm: [defaultAlgorithm],
    token: {
      colorBgContainer: '#fff',
      colorPrimary: layoutSetting.colorPrimary
    },
    components: {}
  });
  const toggleCompact = (isCompact = true) => {
    // 判断是否存在compactAlgorithm
    if (Array.isArray(themeConfig.algorithm)) {
      const index = themeConfig.algorithm.findIndex(item => item === compactAlgorithm);
      if (index >= 0 && isCompact) {
        return;
      }
    }
    layoutSetting.compactAlgorithm = isCompact;
    const algorithm = layoutSetting.theme === 'dark' ? [darkAlgorithm] : [defaultAlgorithm];
    isCompact && algorithm.push(compactAlgorithm);
    themeConfig.algorithm = algorithm;
  };

  /**
   * @description: 修改整体风格
   * @param theme
   * @return
   */
  const toggleTheme = (theme: ThemeType) => {
    layoutSetting.theme = theme;
    toggleCompact(layoutSetting.compactAlgorithm);
    if (theme === 'light' || theme === 'inverted') {
      if (themeConfig.token) themeConfig.token.colorBgContainer = '#fff';
      if (themeConfig.components?.Menu) delete themeConfig.components.Menu;
      toggleDark(false);
    } else if (theme === 'dark') {
      toggleDark(true);
      if (themeConfig.token) themeConfig.token.colorBgContainer = 'rgb(36, 37, 37)';
      if (themeConfig.components) {
        themeConfig.components = {
          ...themeConfig.components,
          Menu: {
            colorItemBg: 'rgb(36, 37, 37)',
            colorSubItemBg: 'rgb(36, 37, 37)',
            menuSubMenuBg: 'rgb(36, 37, 37)'
          } as any
        };
      }
    }
  };

  const toggleDrawerVisible = (visible: boolean) => {
    layoutSetting.drawerVisible = visible;
  };

  /**
   * @description: 修改主题色
   * @param color
   * @return
   */
  const toggleColorPrimary = (color: string) => {
    layoutSetting.colorPrimary = color;
    if (themeConfig.token) themeConfig.token.colorPrimary = color;
  };

  // 监听isDark的变化
  watch(
    isDark,
    () => {
      if (isDark.value) toggleTheme('dark');
      else toggleTheme('light');
    },
    {
      immediate: true
    }
  );

  const toggleCollapsed = (collapsed: boolean) => {
    layoutSetting.collapsed = collapsed;
  };

  /**
   * @description: 修改布局结构
   * @param layout
   * @return
   */
  const toggleLayout = (layout: LayoutType) => {
    if (layoutSetting.theme === 'inverted' && layout === 'mix') layoutSetting.theme = 'light';

    if (layout !== 'mix') {
      layoutSetting.splitMenus = false;
    } else {
      layoutSetting.leftCollapsed = true;
      layoutSetting.splitMenus = true;
    }
    layoutSetting.layout = layout;
  };

  const changeSettingLayout = (key: keyof LayoutSetting, value: any) => {
    if (key === 'theme') toggleTheme(value as ThemeType);
    else if (key === 'colorPrimary') toggleColorPrimary(value);
    else if (key === 'layout') toggleLayout(value as LayoutType);
    else if (key === 'compactAlgorithm') toggleCompact(value);
    else if (key in layoutSetting) (layoutSetting as any)[key] = value;
  };

  return {
    layoutSetting,
    theme: themeConfig,
    toggleTheme,
    toggleCollapsed,
    toggleDrawerVisible,
    changeSettingLayout,
    toggleColorPrimary
  };
});
